<template>
    <div>
        <div style="display: flex;">
            <div style="flex: 1;" class="home-left">
                <el-card style="background: linear-gradient(rgb(248, 248, 242),rgb(255, 248, 248));
                font-size: 20px;font-weight: bold;">今日已问诊总人数：{{ todayDiagnosisCount }}人
                </el-card>
                <el-card style="background: linear-gradient(rgb(242, 249, 246),rgb(255, 248, 248));
                font-size: 20px;font-weight: bold;">平台购药订单：{{ weekDrugOrderCount }}笔
                </el-card>
                <el-card style="background: linear-gradient(rgb(251, 248, 255),rgb(255, 248, 248));
                font-size: 20px;font-weight: bold;">明日预约总人数：{{ todayReserveCount }}人
                </el-card>

            </div>
            <div id="main1" style="width:500px;height:330px;flex: 1;margin-left: 30px;">
                1
            </div>
        </div>

        <div id="main" style="width:500px;height:330px;flex: 1;">

        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
//主页渲染数据 图表echarts组件

export default {
    name: "Home",
    data() {
        return {
            beforeWeekOrderArr: [1, 5, 3, 8, 5, 6, 7],
            todayReserveCount: '',
            weekDrugOrderCount: '',
            todayDiagnosisCount: '',
            userRoleDistributionMap:[]
        }
    },
    mounted() {
        this.getBeforeWeekOrder()
        this.getUserRoleDistributionMap();

        this.getTodayReserveCount()
        this.getWeekDrugOrder()
        this.getTodayDiagnosisCount()
       
    },
    methods: {
        getTodayDiagnosisCount() {//获取今日已问诊总人数
            this.request.get("/manage/getTodayDiagnosisCount").then(res => {
                if (res.code == 200) {
                    this.todayDiagnosisCount = res.data
                    console.log("res===>getTodayDiagnosisCount", res)
                }
            })
        },
        getTodayReserveCount() {//获取预约今日的总人数
            this.request.get("/manage/getTodayReserveCount").then(res => {
                if (res.code == 200) {
                    this.todayReserveCount = res.data
                    console.log("res===>getTodayReserveCount", res)
                }
            })
        },
        getWeekDrugOrder() {//获取上周平台购药订单数
            this.request.get("/manage/getWeekDrugOrder").then(res => {
                if (res.code == 200) {
                    this.weekDrugOrderCount = res.data
                    console.log("res===>getWeekDrugOrder", res)
                }
            })
        },
        getBeforeWeekOrder() {//获取上周订单收入
            this.request.get("/order/getbeforeweekorder").then(res => {
                if (res.code == 200) {
                    let map = new Map(Object.entries(res.data))
                    let values = [...map.values()];
                    this.beforeWeekOrderArr = values
                    console.log("res===>", this.beforeWeekOrderArr)
                }
            })
        },
        getUserRoleDistributionMap(){//获取首页饼图用户统计数据
            this.request.get("/manage/getUserRoleDistributionMap").then(res => {
                if (res.code == 200) {
                    this.userRoleDistributionMap=res.data
                    console.log("getUserRoleDistributionMap====>",res)
                }
            })
        },
    
    },
    watch: {
        userRoleDistributionMap:function (newVal, oldVal) {//监测用户统计的数据对饼图进行渲染 在组件创建时监测数据 然后进行渲染
            var chartDom = document.getElementById('main1');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '用户统计',
                    // subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: newVal,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        beforeWeekOrderArr: function (newVal, oldVal) {//与上类同
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '上周收入统计（单位:万元）',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: newVal,
                        type: 'line',
                        smooth: true,

                    }
                ]
            };
            myChart.setOption(option);
        }
    }
}
</script>

<style lang="less" scoped>
.home-left {
    .el-card {
        margin: 10px 0px 20px 0px
    }
}
</style>